<template>
	<el-dialog
		:visible="visible"
		@update:visible="(val) => $emit('update:visible', val)"
		width="840px"
	>
		<div slot="title" style="font-size: 20px; text-align: center">
			<span>电子签章身份核验</span>&nbsp;
			<el-popover placement="bottom" width="284" trigger="click">
				<i
					slot="reference"
					class="el-icon-question"
					style="cursor: pointer"
				></i>
				<div class="tip">
					<p class="tip__ttl">电子签章说明</p>
					<div class="tip__txt">
						身份核验：需采集你的姓名、身份证号、手机号或人脸图像用于实名认证，且提交给中国金融认证中心进行认证，你的个人信息将保密，仅用于身份认证和意愿认证。
					</div>
					<div class="tip__btn" @click="() => $emit('use-manu', dataDelivery)">
						不用电子签，我要打印签章上传
					</div>
				</div>
			</el-popover>
		</div>
		<div class="form-wrap">
			<el-form
				:model="defaultForm"
				:rules="signRules"
				label-width="160px"
				ref="defaultForm"
			>
				<el-form-item label="企业名称" prop="customerName">
					<template>
						<span>{{ defaultForm.customerName }}</span>
					</template>
				</el-form-item>
				<el-form-item label="社会信用统一代码证" prop="certNum">
					<span>{{ defaultForm.certNum }}</span>
				</el-form-item>
				<el-form-item label="法定代表人" prop="leaderName">
					<el-input v-model="defaultForm.leaderName" size="mini"></el-input>
				</el-form-item>
				<el-form-item label="法定代表人身份证号码" prop="leaderIdNum">
					<el-input
						v-model="defaultForm.leaderIdNum"
						placeholder="法定代表人身份证号码"
						size="mini"
					></el-input>
				</el-form-item>
				<el-form-item label="法定代表人手机号码" prop="contactPhone">
					<el-input v-model="defaultForm.contactPhone" size="mini"></el-input>
				</el-form-item>
				<el-form-item label="验证码" prop="code">
					<div class="">
						<el-input
							v-model="defaultForm.code"
							size="mini"
							style="width: 200px; margin-right: 10px"
						></el-input>
						<el-button type="primary" size="mini" @click="sendCode"
							>发送验证码 <span v-if="second">({{ second }})</span></el-button
						>
					</div>
				</el-form-item>
			</el-form>
			<div style="text-align: center">
				<p style="margin-bottom: 30px">印章预览</p>
				<img :src="defaultForm.signature" width="120" height="120" alt="" />
			</div>
		</div>
		<div style="text-align: center; margin-top: 20px" slot="footer">
			<el-checkbox v-model="checked"
				>我已阅读并同意 《数字签名服务》《隐私服务协议》</el-checkbox
			>
			<p style="font-size: 12px; color: #666; margin-block: 10px">
				需采集你的姓名、身份证号、手机号或人脸图像用于实名认证,且提交给中国金融认证中心进行认证,你的个人信息将保密,仅用于身份认证和意愿认证。
			</p>
			<el-button type="primary" @click="submit" size="medium"
				>提交并签章</el-button
			>
		</div>
	</el-dialog>
</template>

<script>
import { saveAndSignature, sendSignSMSCode } from '@/api'
import axios from 'axios'
import waitSecond from '@/utils/wait-second'
export default {
	props: {
		visible: Boolean,
		businessId: String,
		productId: String,
		defaultForm: Object
	},
	data() {
		return {
			signRules: {
				customerName: [
					{
						required: true,
						message: '请输入企业名称',
						trigger: 'blur'
					}
				],
				leaderName: [
					{
						required: true,
						message: '请输入法定代表人',
						trigger: 'blur'
					}
				],
				leaderIdNum: [
					{
						required: true,
						message: '请输入法定代表人身份证号',
						trigger: 'blur'
					}
				],
				contactPhone: [
					{
						required: true,
						message: '请输入联系手机号',
						trigger: 'blur'
					}
				],
				code: [
					{
						required: true,
						message: '请输入验证码',
						trigger: 'blur'
					}
				]
			},
			signature: '',
			second: 0,
			checked: false
		}
	},
	methods: {
		submit() {
			if (!this.checked) {
				this.$message.error('请阅读并勾选同意协议')
				return
			}
			this.$refs.defaultForm.validate((valid) => {
				if (valid) {
					saveAndSignature(this.defaultForm, {
						businessId: this.businessId
					}).then(() => {
						this.$message.success('提交成功')
						this.$router.push({
							name: 'Payment',
							query: {
								businessId: this.businessId,
								productId: this.productId
							}
						})
					})
				}
			})
		},
		sendCode() {
			sendSignSMSCode(this.defaultForm.contactPhone).then(() => {
				this.$message.success('发送成功')

				waitSecond({
					second: 60,
					onPro: (second) => {
						this.second = second
					},
					onEnd: () => {
						this.second = 0
					}
				})
			})
		}
	},
	components: {}
}
</script>

<style lang="scss" scoped="scoped">
.form-wrap {
	display: grid;
	grid-template-columns: 500px 1fr;
	gap: 20px;
}
.form-wrap ::v-deep {
	.el-form {
		display: grid;
		grid-template-columns: 1fr;
		gap: 12px;
	}
	.el-form-item {
		margin-bottom: 0;
	}
}

.tip {
	&__ttl {
		text-align: center;
		font-size: 14px;
		margin-bottom: 6px;
	}
	&__txt {
		border-radius: 5px;
		background-color: #f0f0f0;
		color: #333;
		font-size: 12px;
		text-indent: 2em;
		margin-bottom: 10px;
		padding: 10px;
	}

	&__btn {
		text-align: right;
		color: #5f88ff;
		font-size: 13px;
		cursor: pointer;
	}
}
</style>
